<template>
    <div class="cart-bottom">
        <div class="cart-bottom-price">
            <input type="checkbox" v-model="cartPage.chooseAll" @change="chooseAllGoods()">
            <span>全选(0)</span>
            <span>￥{{priceSum}}</span>
        </div>
        <div class="cart-bottom-submit">
            <input type="button" value="去结算">
        </div>
    </div>
</template>
<script>
import {mapState} from "vuex";
export default {
    data(){
        return{
        }
    },
    computed:{
        ...mapState(["cartPage"]),
        priceSum(){
            let priceAll=0.00;
            for(let key in this.cartPage.cartList){
                if(this.cartPage.cartList[key]["choose"]){
                    priceAll += this.cartPage.cartList[key]["price"]*this.cartPage.cartList[key]["count"];
                }
            }
            return priceAll;
        }
    },
    methods:{
        chooseAllGoods(){
            //因为双向数据绑定，当选中时，this.cartPage.choose为true,取消选中时，则改为false;
            for(let key in this.cartPage.cartList){
                this.$set(this.cartPage.cartList[key],"choose",this.cartPage.chooseAll);
            }
        }
    },
    mounted(){
        // console.log(this.cartPage.cartList);
        this.chooseAllGoods();
    }
}
</script>
<style lang="less" scoped>
.cart-bottom{
    position:absolute;
    bottom:0rem;
    box-sizing:border-box;
    width:100%;
    height:1rem;
    display:flex;
    flex-flow:row nowrap;
    align-items:center;
    padding:0rem 0.3rem;
    background-color:@white;
    >.cart-bottom-price{
        flex:1;
        display:flex;
        align-items:center;
        box-sizing:border-box;
        padding:0.1rem;
        >input{
            width:0.4rem;
            height:0.4rem;
        }
        >span:nth-child(2){
            padding-left:0.1rem;
            font-size:0.35rem;
        }
        >span:last-child{
            color:@red;
            padding-left:0.1rem;
        }
    }
    >.cart-bottom-submit{
        flex:1;
        text-align:right;
        >input[type="button"]{
            width:1.8rem;
            height:0.6rem;
            border-radius:5%;
            border:none;
            background-color:@pink;
            color:@white;
            font-size:0.35rem;
        }
    }
}
</style>